<template>
  <div class="my-map-box">
    <div class="my-map-search">
      <input
        v-model="param.data.postStr.keyWord"
        placeholder="请输入搜索关键词"
        @click="searchHandle"
        class="input"
      />
      <div class="my-search-result" v-if="searchShow">
        <div
          v-if="searchResult.data == null"
          style="margin-left: 3vw; font-size: 14px; color: #888"
        >
          请输入具体地址(如:武汉大学)
        </div>
        <div
          v-else
          class="my-search-result-item"
          v-for="(item, index) in searchResult.data"
          :key="index"
          @click="clickMarker(item)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import axios from 'axios'
const props = defineProps({
  basemap: Object,
})
// console.log(props.basemap)
const myMap = computed(() => {
  return props.basemap
})
// console.log(myMap)
let vectorLayer = null
let searchResult = reactive({ data: null })
let searchShow = ref(false)
let pointData = reactive({ lng: '', lat: '' })

// url
const url = ref('http://api.tianditu.gov.cn/v2/search')
// 参数
let param = reactive({
  data: {
    postStr: {
      keyWord: '',
      level: 18,
      mapBound: '116.02524,39.83833,116.65592,39.99185',
      queryType: 1,
      start: 0,
      count: 10,
    },
    type: 'query',
    tk: '9938879b97050be7b20ec0a339af7609',
  },
})

// 点中某个结果
const clickMarker = (item) => {
  // setMarker(item.lonlat.split(','))
  myMap.value.getView().setCenter(item.lonlat.split(','))
  myMap.value.getView().setZoom(19)
  param.data.postStr.keyWord = ''
  searchShow.value = false
}

//搜索
const searchHandle = () => {
  // 地名查询
  axios({
    method: 'GET',
    url: url.value,
    params: param.data,
  }).then(function (res) {
    // console.log(res.data.pois)
    searchShow.value = true
    if (res.data.pois) {
      searchResult.data = res.data.pois
    } else {
      searchResult.data = null
    }
    // console.log(res.data)
  })
}
</script>
<style scoped lang="less">
.my-map-box {
  width: 100px;
  height: 20px;
  margin: auto;
  position: relative;
  z-index: 1;
  .my-map-search {
    position: absolute;
    top: 5px;
    left: 37px;
    // z-index: 1;
    .input {
      height: 6vh;
      width: 80vw;
      padding-left: 20px;
      font-size: 16px;
      border: 0;
      border-radius: 10px;
    }
    .my-map-clear {
      position: absolute;
      top: 0;
      left: 380px;
      z-index: 999;
      width: 90px;
      text-align: center;
      line-height: 30px;
      border: 1px solid #dcdfe6;
      background-color: #f5f7fa;
      border-radius: 3px;
      cursor: pointer;
      color: #909399;
      &:hover {
        background-color: #ecf5ff;
        color: #409eff;
      }
    }
    .my-search-result {
      position: absolute;
      left: 0;
      z-index: 1;
      width: 80vw;
      max-height: 260px;
      border: 1px solid #eee;
      box-sizing: border-box;
      background-color: #fff;
      overflow: auto;
      padding: 10px 0;
      border-radius: 0 0 10px 10px;
      .my-search-result-item {
        width: 100%;
        padding: 8px 15px;
        font-size: 13px;
        color: #000;
        box-sizing: border-box;
        cursor: pointer;
        &:hover {
          background-color: #eee;
        }
      }
    }
  }
  :deep(.el-input-group) {
    width: 371px;
  }
}
</style>
